/* eslint-disable @next/next/no-img-element */
'use client'; // Error boundaries must be Client Components

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  console.error('inside global error comp:', error);
  return (
    // global-error must include html and body tags
    <html>
      <body>
        <div
          className="global-error"
          style={{
            maxWidth: '400px',
            margin: '0 auto',
            textAlign: 'center',
            padding: '100px 0',
          }}
        >
          <img
            style={{
              width: 300,
              height: 300,
              display: 'block',
              margin: '0 auto',
            }}
            src="/nextasset/svgs/network_error.svg"
            alt="network error"
          />
          <h3 style={{ fontSize: 18, marginBottom: 20 }}>
            Oops! Network error detected, please try again.
          </h3>
          <button
            onClick={() => location.reload()}
            style={{
              padding: '4px 14px',
              borderRadius: 4,
              background: '#942ffb',
              color: 'white',
            }}
          >
            Refresh
          </button>
        </div>
      </body>
    </html>
  );
}
